<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Kfrwe - 基于KETTLE文件资源库的可视化ETL项目.</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark" href="favicon.ico" type="image/x-icon"　/>
    <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        var context;

        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };

        $.ajax({
            url: "filerepository/list",
            success: function (data) {
                console.log("请求成功！");
                console.log(data);
                $(document).ready(function(){
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                });
            },
            error: function () {
                console.log("错误了！")
            }
        })

        function zTreeOnClick(event, treeId, treeNode) {
            console.log(treeNode);
            context = treeNode;
            // 加载job, trans列表
            var path = treeNode.path != undefined ? treeNode.path : treeNode.baseDirectory;
            var repositoryName = treeNode.getPath()[0].name;
            var treeNodePath  = "";
            $.each(treeNode.getPath(), function(i, n) {
            	if (i > 0) treeNodePath += "/" + n.name;
            });
            $.ajax({
                url: "filerepository/jobandtrans_list",
                data: {path: path},
                success: function (data) {
                    console.log("请求成功！");
                    var lis = "";
                    data.forEach(function (item) {
                        lis += "<tr>" +
                                    "<td>" + item.split('\\')[item.split('\\').length - 1] + "</td>" +
                                    "<td><a data-repositoryName='"+repositoryName+"' data-treeNodePath='"+treeNodePath+"' name='run' id=" + item.split('\\')[item.split('\\').length - 1] + " href='#' onclick='run(this)'>run</a></td>" +
                                    "<td><a name='view' id='" + item + "' href='#' onclick='view(this)'>view</a></td>" +
                                "</tr>";
                    });
                    $("#treeDemo1").empty();
                    $("#treeDemo1").append(lis);
                },
                error: function () {
                    console.log("错误了！")
                }
            })
        };

        function view(e) {
            console.log("点击了name=view的a标签");
            console.log(e.id);
            window.open ("filerepository/viewbox?resourcePath=" + encodeURI(e.id), "newwindow", "height=600, width=600, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
        }

        function run(e) {
            $("#span-log").empty();
            console.log("点击了name=run的a标签");
            console.log(e.id);
            var repositoryName = $(e).data("repositoryName");
            var directory = $(e).data("treeNodePath");
            var name = e.id;
            var username = "admin";
            var password = "";
            $.ajax({
                url: "filerepository/running",
                data: {repositoryName: repositoryName, directory: directory, name: name, username: username, password: password},
                beforeSend:function(XMLHttpRequest){
                    $("#doing").show();
                    // $("#doing").html("正在处理，请稍后···");
                },
                success: function (data) {
                    console.log("请求成功！");
                    $("#span-log").empty();
                    $("#span-log").append(data);
                },
                // 请求完成后的回调函数 (请求成功或失败之后均调用)
                complete:function(XMLHttpRequest,textStatus){
                    $("#doing").hide();
                },
                error: function () {
                    console.log("错误了！");
                    $("#doing").hide();
                }
            })
        }
    </script>
    <style>
        .ztree{
            font-size: 20px;
        }
        table{
            border-collapse: collapse;
            padding: 0;
        }
        table tr td{
            /*border: 1px solid #316AC5;*/
            border-bottom: 1px solid #409EFF;
            border-right: 1px solid #409EFF;
            width: 100%;
            padding: 5px 30px 5px 30px;
        }
    </style>
</head>
<body style="">
<div style="position: relative;width:100%; height: 100%;margin: 0;padding: 0;">
    <div id="doing" style="position:absolute;text-align: center; color: aliceblue;line-height: 500px;width:100%; height: 100%; display: none; background-color: #333333; opacity: 0.7;">
        <img src="img/loading.gif" style="vertical-align: middle; width: 25px;"><span style="color: #409EFF">拼命加载中</span>
    </div>
    <h2>KETTLE FILE REPOSITORY VISUAL ETL PROJECT.</h2>
    <div style="border: 1px solid black; width: 20%; height: 500px; float: left; overflow:auto;">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div style="border: 1px solid black; width: 78%; height: 500px; float: right; overflow:auto;">
        <table id="treeDemo1"></table>
    </div>
    <div style="clear:both;"></div>
    <div style="border: 1px solid black; width: 100%; height: 300px; margin-top: 10px; overflow:auto;">
        <pre id="span-log" style="margin: 5px; display: block">这里是运行日志</pre>
    </div>
    <div style="width: 100%; height: 30px; margin-top: 10px; text-align: center">
        <a href="chartanalysis" style="margin: 0 auto; display: block;">进入图表分析</a>
        <a href="scheduledtask/query" style="margin: 0 auto; display: block;">配置定时任务</a>
    </div>
</div>
</body>
</html>